import React, { useState, useEffect } from "react";
import {
  Modal,
  Button,
  Form,
  Input,
  InputNumber,
  Select,
  Switch,
  DatePicker,
} from "antd";
import dayjs from "dayjs";
import { amendUser } from "../../../../api/userApi";

// interface DataType {   他的
//     key: React.Key; //序号
//     name: string; //促销标题
//     detail: string; //促销详情
//     address: string; //使用行程
//     isPut: boolean //以未上架判断
//     time: string//添加时间
// }

// 定义数据类型 我的
interface Type {
  userId: number;
  userName: string;
  userAccount: string;
  userPhone: number;
  regTime: string;
  userBuyMoney: number;
  status: boolean;
}

interface PropsType {
  isModalOpen: boolean;
  closeCom(): void; //取消弹框事件
  edit: Type | undefined;
}

function UserEdit(props: PropsType) {
  const [form] = Form.useForm();
  const { RangePicker } = DatePicker;
  const [commitdata, setcommitdata] = useState<Type[]>([]); //存修改的值
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const config = {
    rules: [
      {
        type: "object" as const,
        required: true,
        message: "Please select time!",
      },
    ],
  };

  const dateFormat = "YYYY-MM-DD hh:mm:ss";

  /* eslint-disable no-template-curly-in-string */
  const validateMessages = {
    required: "${label} is required!",
    types: {
      email: "${label} is not a valid email!",
      number: "${label} is not a valid number!",
    },
    number: {
      range: "${label} must be between ${min} and ${max}",
    },
  };
  /* eslint-enable no-template-curly-in-string */

  const onFinish = async (values: any) => {
    let data={ userId: values.userId,
        userName: values.userName,
        userPhone: values.userPhone,}
    amendUser(data).then((res: any) => {
        console.log("修改的结果", res);
        //   setcommitdata(res);
        //   console.log("修改用户成功");
        //   cancelBtn();
      }).catch((err) => {
        console.log("err333", err);
        console.log("服务器错误");
      });
    console.log('data',data);
    props.closeCom();  //关闭弹窗
  };

  //点击取消退出弹框
  const cancelBtn = () => {
    // console.log('点击了取消按钮');
    props.closeCom();
  };
  useEffect(() => {
    form.setFieldsValue({
      userId: props.edit?.userId,
      userName: props.edit?.userName,
      userAccount: props.edit?.userAccount,
      userPhone: props.edit?.userPhone,
      regTime: dayjs(props.edit?.regTime, dateFormat),
      userBuyMoney: props.edit?.userBuyMoney,
      status: props.edit?.status,
    });
    console.log("子组件接收到的父组件参数", props.edit);
  }, [props]);

  //点击确定修改 获取修改后内容
//   const goCommit = async (value: any) => {
//     amendUser({
//       userId: value.edit?.userId,
//       userName: value.edit?.userName,
//       userPhone: value.edit?.userPhone,
//     })
//       .then((res: any) => {
//         console.log("修改的结果", res);
//         setcommitdata(res);
//         console.log("修改用户成功");
//         cancelBtn();
//       })
//       .catch((err) => {
//         console.log("err333", err);
//         console.log("服务器错误");
//       });
//   };

  return (
    <div>
      {/* onOk={handleOk} onCancel={handleCancel} */}
      <Modal
        title="编辑"
        centered={true}
        open={props.isModalOpen}
        footer={null}
        onCancel={props.closeCom}
      >
        <Form
          {...layout}
          name="nest-messages"
          onFinish={onFinish}
          initialValues={{ remember: true }}
          style={{ maxWidth: 600 }}
          validateMessages={validateMessages}
          form={form}
        >
          <Form.Item
            name="userId"
            label="序号"
            rules={[{ required: true }]}
            initialValue={props.edit?.userId}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="userName"
            label="促用户昵称"
            initialValue={props.edit?.userName}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="userAccount"
            label="促用户账号"
            initialValue={props.edit?.userAccount}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="userPhone"
            initialValue={props.edit?.userPhone}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="regTime"
            label="注册时间"
            {...config}
            initialValue={props.edit?.regTime}
          >
            <DatePicker showTime />
          </Form.Item>
          <Form.Item
            name="userBuyMoney"
            label="消费金额"
            initialValue={props.edit?.userBuyMoney}
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
            label="用户可用状态"
            valuePropName="checked"
            name="status"
            initialValue={props.edit?.status}
          >
            <Switch />
          </Form.Item>

          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginRight: "20px" }}
            >
              确认
            </Button>
            <Button htmlType="button" onClick={cancelBtn}>
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
export default UserEdit;
